import { runCodeWithBlob } from "@/utils/CodeRunner";
import { onMounted, watch } from "vue";

interface ViewerProps { readonly code?: string | undefined; readonly runCode?: number | undefined; }
/**
 * 使用 Cesium 视图的组合式函数
 * @param {Array<string>} params - 容器 ID 列表，默认为 ["container"]
 * @param {Object} props - 包含运行代码和触发条件的属性对象
 * @param {string} props.code - 需要执行的代码字符串
 * @param {number} props.runCode - 触发代码执行的标志位
 * @returns {Object} - 返回包含清理 DOM 和执行代码的方法
 * @property {Function} restDom - 清理指定容器的 DOM 内容
 * @property {Function} handleRun - 执行传入的代码
 */
export function useViewer(params = ["container"], props: ViewerProps) {
    // 监听 runCode 的变化，触发代码执行
    watch(
        () => props.runCode,
        () => {
            if (props.runCode) {
                restDom(); // 清理容器内容
                handleRun(); // 执行代码
            }
        }
    );

    /**
     * 清理指定容器的 DOM 内容
     */
    const restDom = () => {
        params.forEach(id => {
            const element = document.getElementById(id);
            if (element) element.innerHTML = ''; // 清空容器内容
        });
    };

    /**
     * 执行传入的代码
     */
    const handleRun = () => {
        if (!props.code) return;
        runCodeWithBlob(props.code); // 通过 Blob 运行代码
    };

    // 组件挂载时自动执行一次代码
    onMounted(() => {
        handleRun();
    });

    // 返回方法供外部调用
    return {
        restDom,
        handleRun
    };
}